<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.SuperSlide.2.1.1.js"></script>
<style type="text/css">
body,ul,li{margin:0px;padding:0px}
li{list-style:none;float:left;}
.qh{width:1000px;height:500px;margin:0px auto}
.qh .hd{width:1000px;height:30px;}
.qh .hd ul li{width:240px;height:30px;line-height:30px;text-align:center;margin-right:10px;background:#CCC;cursor:pointer}
.qh .hd ul li.on{background:#30C}
.qh .bd{width:990px;height:460px;margin-top:10px}
.qh .bd ul li{float:left;width:990px;height:460px;background:#CCC}
</style>
<body>
<div class="qh">

<div class="hd">
<ul>
<li>切换一</li>
<li>切换二</li>
<li>切换三</li>
<li>切换四</li>
</ul>
</div>

<div class="bd">
<ul>
<li>第一屏</li>
<li>第二屏</li>
<li>第三屏</li>
<li>第四屏</li>
</ul>
</div>

</div>
<script language="javascript">
	$('document').ready(function() {
        $('.qh').slide({
			autoPage:false,
			titCell:".hd li",
			mainCell:".bd ul",
			effect:"leftLoop",
			autoPlay:true,
			interTime:2000,
			delayTime:2000,
			vis:1,
			scroll:1,
			trigger:"mouseover"
		})
    });
</script>
</body>
</html>
